<template>
  <div>
    <el-button
      v-if="item.activityObj == '活动对象'"
      @click="handleJoin"
      style="
        margin-top: 100px;
        margin-left: 7.5%;
        color: rgb(79, 192, 141);
        font-size: 20px;
      "
      >参加活动</el-button
    >
    <div class="content">
      <div
        class="name"
        style="margin: 50px 0 10px 0; text-align: center; font-size: 40px"
      >
        {{ item.title }}
      </div>
      <div
        style="
          text-align: center;
          margin: 10px 0 40px 0;
          color: #575757;
          font-size: 14px;
        "
      >
        发布时间:{{ $moment(item.create_time).format("yyyy-MM-DD HH:mm:ss") }}
      </div>
      <div style="text-align: left; margin: 40px">
        <span style="font-size: 20px">一、活动时间：</span
        >{{ $moment(item.timeStart).format("yyyy-MM-DD HH:mm:ss") }}
        -
        {{ $moment(item.timeEnd).format("yyyy-MM-DD HH:mm:ss") }}
      </div>

      <div style="text-align: left; margin: 40px">
        <span style="font-size: 20px">二、活动对象：</span>
        {{ item.activityObjtext }}
      </div>
      <div style="text-align: left; margin: 40px">
        <span style="font-size: 20px">三、举办方：</span>
        {{ item.host }}
      </div>
      <div style="text-align: left; margin: 40px">
        <span style="font-size: 20px">四、社团名称：</span
        >{{ item.organization_name }}
      </div>

      <div style="text-align: left; margin: 40px">
        <span style="font-size: 20px">五、地点:</span> {{ item.activityPlace }}
      </div>

      <div style="display: flex; flex-direction: column; padding: 0; flex: 1">
        <div style="text-align: left; margin: 0 40px 0 40px">
          <span style="font-size: 20px">六、活动内容：</span>
        </div>

        <div class="logo" style="display: flex; justify-content: center">
          <img
            :src="imgUrl + item.icon"
            alt=""
            style="width: 150px; height: 150px"
          />
        </div>
        <div
          v-html="item.content"
          style="
            height: 100px;
            overflow: hidden;
            text-indent: 2em;
            margin-left: 4em;
          "
        ></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      //活动详细信息
      item: {},
      imgUrl: process.env.VUE_APP_IMG_URL,
      //当前用户信息
      userInfo: {
        user_id: "",
      },
    };
  },
  async mounted() {
    //获取活动信息初始化
    this.fetch();
  },
  methods: {
    // 参加该活动提交函数和判断用户是否已登录
    async handleJoin2() {
      //判断用户是否已登录
      const { data } = await this.$http.getUserInfo();

      if (data.code == 401) {
        this.$message.error("您未登录，请登录后查看");
        this.$router.push(`/login`);
        return;
      }

      if (data.code !== 200) {
        return;
      }
      //存储用户信息
      this.userInfo = data.data;
      //提交参与活动接口
      const { data: res } = await this.$http.userJoinActivity({
        id: this.userInfo.user_id,
        aid: this.item.id,
      });
      if (res.code == 200) {
        this.$message.success(res.message);
      } else {
        this.$message.error(res.message);
      }
    },
    //声明参加活动的异步函数
    async handleJoin() {
      this.$confirm("是否参加该活动", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //用户手动确认后提交参与活动接口
          this.handleJoin2();
        })

        .catch(() => {});

      if (res.data.code === 400) {
        this.$message.success(res.message);
      }
      if (res.data.code === 200) {
        this.$message.success(res.message);
      }
    },
    //获取用户信息接口
    async getUserInfo() {
      const { data } = await this.$http.getUserInfo();
      this.userInfo = data.data;
    },
    //活动初始化函数
    async fetch() {
      //获取当前活动接口
      const { data } = await this.$http.getActivityById({
        id: this.$route.params.id,
      });
      this.item = data.data[0];
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  position: relative;
  width: 85%;
  margin: 0 auto;
  margin-bottom: 200px;

  .picture {
    width: 10rem;
    height: 8rem;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }
  .card {
    position: absolute;
    top: 6.8rem;
    left: 50%;
    transform: translateX(-50%);
    background-color: #fff;
    width: 8.5rem;
    margin: 0 auto;
    border-radius: 0.2rem;
    height: 1.4rem;
    padding: 0.4rem;
    box-shadow: 0px 0px 5px 1px rgb(236, 236, 236);
    .title {
      font-size: 0.45rem;
    }
    .people-number {
      margin-top: 0.2rem;
      font-size: 0.3rem;
      span {
        color: red;
        font-size: 0.5rem;
      }
    }
  }
  .box {
    padding: 0.4rem;
    margin-top: 1rem;
    font-size: 0.4rem;
    .category {
      font-size: 0.35rem;
      span {
        color: #aaa;
      }
    }
    .introduction {
      &-title {
        padding-left: 0.15rem;
        border-left: 0.15rem solid yellow;
        margin: 0.5rem 0;
      }
      &-content {
        overflow: scroll;
        border-top: 1px dashed #eee;
        .image {
          margin: 0 !important;
        }
        line-height: 0.6rem;
        img {
          width: 100% !important;
          height: 100% !important;
        }
        font-size: 14px;
        .ql-size-small {
          font-size: 10px !important;
        }
        .ql-size-large {
          font-size: 18px !important;
        }
        .ql-size-huge {
          font-size: 32px !important;
        }
      }
    }
  }
}
</style>
